import React, { Component } from 'react';
import { Grid, Select, Search, CascaderSelect } from '@alifd/theme-ds-jxc';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import service from '../../../../utils/service';
import api from '../../../../utils/api';

const { Row, Col } = Grid;

export default class chooseHead extends Component {
  static displayName = 'Overview';
  static propTypes = {};
  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      search: '',
      GoodsTypeList: [],
      SupperDataList: [],
    };
  }
  // 获取供应商列表
  getSupperInfo= () => {
    service({
      method: 'get',
      url: api.GetSuperList,
    })
      .then((res) => {
        const data = res.data.list;
        const NewSList = [];
        if (data && data != '') {
          data.forEach((item) => {
            NewSList.push({ label: item.name, value: item.id.toString() });
          });
          NewSList.sort((item1, item2) => {
            return item1.label.localeCompare(item2.label, 'cn');
          });
          this.setState(
            {
              SupperDataList: NewSList,
            }
          );
        }
      });
  }
  // 获取商品类别列表
  getGoodsTypeList= () => {
    service({
      method: 'get',
      url: api.GoodsTypeList,
    })
      .then((res) => {
        // console.log(res);
        const data = res.data.class_list;
        if (data) {
          data.forEach((item) => {
            if (item.children) {
              item.children.sort((item1, item2) => {
                return item1.label.localeCompare(item2.label, 'cn');
              });
            }
          });
          this.setState(
            {
              GoodsTypeList: data,
            }
          );
        }
      });
  }
  componentDidMount() {
    this.getGoodsTypeList();
    this.getSupperInfo();
  }
  formChange = (value) => {
    this.props.onChange(value);
  };
  toSearch = (value) => {
    this.props.onSearch(value);
  }

  render() {
    return (
      <IceFormBinderWrapper
        value={this.state.value}
        onChange={this.formChange}
        ref="form"
      >
        <Row wrap gutter="4">
          <Col l="5" className="FormCol">
            <div style={styles.formItem}>
              <span style={styles.SelectLabel}>商品类别</span>
              <IceFormBinder name="GoodsType">
                <CascaderSelect placeholder="请选择商品类别" style={styles.Select} dataSource={this.state.GoodsTypeList} expandTriggerType="hover" size="large" hasClear listStyle={{ width: '180px' }} />
              </IceFormBinder>
            </div>
          </Col>
          <Col l="5" className="FormCol">
            <div style={styles.formItem}>
              <span style={styles.SelectLabel}>供应商</span>
              <IceFormBinder name="SupperList">
                <Select placeholder="请选择供应商" style={styles.Select} dataSource={this.state.SupperDataList} size="large" autoWidth hasClear />
              </IceFormBinder>
            </div>
          </Col>
          <Col l="6" className="FormCol">
            <IceFormBinder name="search">
              <Search style={styles.Search}
                type="normal"
                placeholder="请输入商品名称或者条码"
                size="medium"
                onSearch={this.toSearch}
              />
            </IceFormBinder>
          </Col>
        </Row>
      </IceFormBinderWrapper>
    );
  }
}

const styles = {
  overview: {
    h3: {
      fontSize: '20px',
      textAlign: 'left',
      lineHeight: '30px',
      fontFamily: 'SourceHanSans-Medium',
      color: '#333333',
      marginBottom: '20px',
    },
  },
  alignRight: {
    textAlign: 'right',
  },
  container: {
    padding: '0',
  },
  alignLeft: {
    float: 'left',
  },
  Select: {
    float: 'right',
    width: 'calc(100% - 100px)',
    height: '38px',
    // marginRight: '40px',
  },
  SelectLabel: {
    fontSize: '14px',
    lineHeight: '40px',
    float: 'left',
    margin: '0 10px 0 0',
    padding: '0',
    color: '#666',
    textAlign: 'right',
    maxWidth: '100px',
    minWidth: '60px',
  },
  Search: {
    width: '100%',
    marginLeft: '20px',
  },
  formItem: {
    display: 'flex',
    width: '100%',
    alignItems: 'center',
    margin: '10px 0',
  },
};
